<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品过滤功能验证</title>
    <style>
        body { 
            font-family: Arial, sans-serif; 
            max-width: 1000px; 
            margin: 0 auto; 
            padding: 20px; 
            background: #f5f5f5;
        }
        .container { 
            background: white; 
            padding: 25px; 
            border-radius: 8px; 
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .section { 
            margin: 20px 0; 
            padding: 15px; 
            border: 1px solid #ddd; 
            border-radius: 5px; 
        }
        .error { background: #fee; border-color: #fcc; }
        .success { background: #efe; border-color: #cfc; }
        .info { background: #eef; border-color: #ccf; }
        .warning { background: #fff3cd; border-color: #ffeaa7; }
        pre { 
            background: #f8f9fa; 
            padding: 12px; 
            border-radius: 4px; 
            overflow-x: auto; 
            font-size: 13px;
            border: 1px solid #e9ecef;
            max-height: 400px;
        }
        button { 
            padding: 10px 20px; 
            margin: 8px 5px; 
            cursor: pointer; 
            border: none;
            border-radius: 4px;
            font-weight: 500;
            background: #007bff;
            color: white;
        }
        button:hover { background: #0056b3; }
        h1 { color: #333; border-bottom: 2px solid #007bff; padding-bottom: 10px; }
        h3 { color: #555; margin-top: 0; }
        .api-url {
            background: #f8f9fa;
            padding: 8px 12px;
            border-radius: 4px;
            font-family: monospace;
            border: 1px solid #dee2e6;
            margin: 8px 0;
            word-break: break-all;
        }
        .result-item {
            background: #f9f9f9;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            padding: 12px;
            margin: 8px 0;
        }
        .badge {
            display: inline-block;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 11px;
            font-weight: bold;
            margin-left: 8px;
        }
        .badge-success { background: #d4edda; color: #155724; }
        .badge-danger { background: #f8d7da; color: #721c24; }
        .badge-info { background: #d1ecf1; color: #0c5460; }
    </style>
</head>
<body>
    <h1>🔧 产品过滤功能修复验证</h1>
    
    <div class="container">
        <div class="section info">
            <h3>📋 修复说明</h3>
            <p><strong>问题：</strong> productTypeRef参数没有正确过滤产品结果</p>
            <p><strong>修复：</strong> 在ProductQueryEndpoint中实现了正确的字段选择器过滤</p>
            <p><strong>原理：</strong> 使用QueryFactory.equal("spec.productTypeRef", value)进行字段过滤</p>
        </div>
    </div>

    <div class="container">
        <h3>🧪 功能验证</h3>
        <div class="section">
            <button onclick="testAllProducts()">📋 测试所有产品</button>
            <button onclick="testProductTypeFilter()">🔍 测试产品类型过滤</button>
            <button onclick="testSpecificTypeRef()">🎯 测试特定产品类型</button>
            <button onclick="testKeywordSearch()">🔎 测试关键词搜索</button>
        </div>
        <div id="testResult"></div>
    </div>

    <div class="container">
        <h3>📊 修复对比</h3>
        <div class="section">
            <table style="width: 100%; border-collapse: collapse;">
                <thead>
                    <tr style="background: #f5f5f5;">
                        <th style="border: 1px solid #ddd; padding: 8px;">方面</th>
                        <th style="border: 1px solid #ddd; padding: 8px;">修复前</th>
                        <th style="border: 1px solid #ddd; padding: 8px;">修复后</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td style="border: 1px solid #ddd; padding: 8px;"><strong>过滤逻辑</strong></td>
                        <td style="border: 1px solid #ddd; padding: 8px;">❌ 无实现</td>
                        <td style="border: 1px solid #ddd; padding: 8px;">✅ 字段选择器过滤</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid #ddd; padding: 8px;"><strong>productTypeRef参数</strong></td>
                        <td style="border: 1px solid #ddd; padding: 8px;">❌ 被忽略</td>
                        <td style="border: 1px solid #ddd; padding: 8px;">✅ equal("spec.productTypeRef", value)</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid #ddd; padding: 8px;"><strong>关键词搜索</strong></td>
                        <td style="border: 1px solid #ddd; padding: 8px;">❌ 不支持</td>
                        <td style="border: 1px solid #ddd; padding: 8px;">✅ 名称和描述搜索</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid #ddd; padding: 8px;"><strong>API文档</strong></td>
                        <td style="border: 1px solid #ddd; padding: 8px;">❌ 缺少参数</td>
                        <td style="border: 1px solid #ddd; padding: 8px;">✅ 完整参数说明</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <script>
        // 测试所有产品
        async function testAllProducts() {
            const resultDiv = document.getElementById('testResult');
            
            try {
                resultDiv.innerHTML = '<div class="section info">🔄 正在测试所有产品API...</div>';
                
                const url = '/apis/content.halo.run/v1alpha1/products?page=1&size=10';
                const response = await fetch(url);
                
                let html = `
                    <div class="section ${response.ok ? 'success' : 'error'}">
                        <h4>${response.ok ? '✅' : '❌'} 所有产品API测试</h4>
                        <div class="api-url"><strong>URL:</strong> ${url}</div>
                        <p><strong>状态码:</strong> ${response.status} ${response.statusText}</p>
                `;
                
                if (response.ok) {
                    const data = await response.json();
                    const items = data.items || [];
                    
                    html += `
                        <p><strong>产品数量:</strong> ${items.length}</p>
                        <p><strong>总数:</strong> ${data.total || 0}</p>
                        <p><strong>页码:</strong> ${data.page || 1}</p>
                        <p><strong>页大小:</strong> ${data.size || 0}</p>
                    `;
                    
                    if (items.length > 0) {
                        html += '<h5>📋 产品列表：</h5>';
                        items.forEach(product => {
                            html += `
                                <div class="result-item">
                                    <strong>${product.spec.displayName}</strong>
                                    <span class="badge badge-info">类型: ${product.spec.productTypeRef || '未设置'}</span>
                                    <br><small>描述: ${product.spec.description || '无'}</small>
                                </div>
                            `;
                        });
                    }
                    
                    html += `
                        <details style="margin-top: 10px;">
                            <summary>查看完整响应</summary>
                            <pre>${JSON.stringify(data, null, 2)}</pre>
                        </details>
                    `;
                } else {
                    const errorText = await response.text();
                    html += `<pre>错误详情: ${errorText}</pre>`;
                }
                
                html += '</div>';
                resultDiv.innerHTML = html;
                
            } catch (error) {
                resultDiv.innerHTML = `
                    <div class="section error">
                        <h4>❌ 测试失败</h4>
                        <pre>${error.message}</pre>
                    </div>
                `;
            }
        }
        
        // 测试产品类型过滤
        async function testProductTypeFilter() {
            const resultDiv = document.getElementById('testResult');
            
            try {
                resultDiv.innerHTML = '<div class="section info">🔄 正在测试产品类型过滤...</div>';
                
                const url = '/apis/content.halo.run/v1alpha1/products?page=1&size=10&productTypeRef=product-type-cnc-machines';
                const response = await fetch(url);
                
                let html = `
                    <div class="section ${response.ok ? 'success' : 'error'}">
                        <h4>${response.ok ? '✅' : '❌'} 产品类型过滤测试</h4>
                        <div class="api-url"><strong>URL:</strong> ${url}</div>
                        <p><strong>过滤条件:</strong> productTypeRef=product-type-cnc-machines</p>
                        <p><strong>状态码:</strong> ${response.status} ${response.statusText}</p>
                `;
                
                if (response.ok) {
                    const data = await response.json();
                    const items = data.items || [];
                    
                    html += `<p><strong>过滤后产品数量:</strong> ${items.length}</p>`;
                    
                    if (items.length > 0) {
                        let correctCount = 0;
                        html += '<h5>🔍 过滤结果验证：</h5>';
                        
                        items.forEach(product => {
                            const isCorrect = product.spec.productTypeRef === 'product-type-cnc-machines';
                            if (isCorrect) correctCount++;
                            
                            html += `
                                <div class="result-item" style="border-color: ${isCorrect ? '#28a745' : '#dc3545'}">
                                    <strong>${product.spec.displayName}</strong>
                                    <span class="badge ${isCorrect ? 'badge-success' : 'badge-danger'}">
                                        ${isCorrect ? '✅ 匹配' : '❌ 不匹配'}
                                    </span>
                                    <br><small>实际类型: ${product.spec.productTypeRef}</small>
                                </div>
                            `;
                        });
                        
                        if (correctCount === items.length) {
                            html += `
                                <div class="section success" style="margin-top: 10px;">
                                    <h5>🎉 过滤功能正常！</h5>
                                    <p>所有 ${items.length} 个产品都正确匹配了过滤条件。</p>
                                </div>
                            `;
                        } else {
                            html += `
                                <div class="section error" style="margin-top: 10px;">
                                    <h5>❌ 过滤功能有问题！</h5>
                                    <p>只有 ${correctCount}/${items.length} 个产品正确匹配。</p>
                                </div>
                            `;
                        }
                    } else {
                        html += '<p><em>没有找到匹配的产品（可能是正常的，如果确实没有该类型的产品）</em></p>';
                    }
                    
                    html += `
                        <details style="margin-top: 10px;">
                            <summary>查看完整响应</summary>
                            <pre>${JSON.stringify(data, null, 2)}</pre>
                        </details>
                    `;
                } else {
                    const errorText = await response.text();
                    html += `<pre>错误详情: ${errorText}</pre>`;
                }
                
                html += '</div>';
                resultDiv.innerHTML = html;
                
            } catch (error) {
                resultDiv.innerHTML = `
                    <div class="section error">
                        <h4>❌ 测试失败</h4>
                        <pre>${error.message}</pre>
                    </div>
                `;
            }
        }
        
        // 测试特定产品类型（原问题URL）
        async function testSpecificTypeRef() {
            const resultDiv = document.getElementById('testResult');
            
            try {
                resultDiv.innerHTML = '<div class="section info">🔄 正在测试原问题URL...</div>';
                
                const url = '/apis/content.halo.run/v1alpha1/products?page=1&size=100&productTypeRef=%E6%B6%A4%E7%BA%B6%E7%BA%B1%E7%BA%BF';
                const response = await fetch(url);
                
                let html = `
                    <div class="section ${response.ok ? 'success' : 'error'}">
                        <h4>${response.ok ? '✅' : '❌'} 原问题URL测试</h4>
                        <div class="api-url"><strong>URL:</strong> ${url}</div>
                        <p><strong>过滤条件:</strong> productTypeRef=涤纶纱线 (URL编码)</p>
                        <p><strong>状态码:</strong> ${response.status} ${response.statusText}</p>
                `;
                
                if (response.ok) {
                    const data = await response.json();
                    const items = data.items || [];
                    
                    html += `<p><strong>过滤后产品数量:</strong> ${items.length}</p>`;
                    
                    if (items.length > 0) {
                        html += '<h5>🔍 匹配的产品：</h5>';
                        items.forEach(product => {
                            html += `
                                <div class="result-item">
                                    <strong>${product.spec.displayName}</strong>
                                    <span class="badge badge-info">类型: ${product.spec.productTypeRef}</span>
                                    <br><small>描述: ${product.spec.description || '无'}</small>
                                </div>
                            `;
                        });
                    } else {
                        html += '<p><em>没有找到"涤纶纱线"类型的产品</em></p>';
                    }
                    
                    html += `
                        <details style="margin-top: 10px;">
                            <summary>查看完整响应</summary>
                            <pre>${JSON.stringify(data, null, 2)}</pre>
                        </details>
                    `;
                } else {
                    const errorText = await response.text();
                    html += `<pre>错误详情: ${errorText}</pre>`;
                }
                
                html += '</div>';
                resultDiv.innerHTML = html;
                
            } catch (error) {
                resultDiv.innerHTML = `
                    <div class="section error">
                        <h4>❌ 测试失败</h4>
                        <pre>${error.message}</pre>
                    </div>
                `;
            }
        }
        
        // 测试关键词搜索
        async function testKeywordSearch() {
            const resultDiv = document.getElementById('testResult');
            
            try {
                resultDiv.innerHTML = '<div class="section info">🔄 正在测试关键词搜索...</div>';
                
                const url = '/apis/content.halo.run/v1alpha1/products?page=1&size=10&keyword=CNC';
                const response = await fetch(url);
                
                let html = `
                    <div class="section ${response.ok ? 'success' : 'error'}">
                        <h4>${response.ok ? '✅' : '❌'} 关键词搜索测试</h4>
                        <div class="api-url"><strong>URL:</strong> ${url}</div>
                        <p><strong>搜索关键词:</strong> CNC</p>
                        <p><strong>状态码:</strong> ${response.status} ${response.statusText}</p>
                `;
                
                if (response.ok) {
                    const data = await response.json();
                    const items = data.items || [];
                    
                    html += `<p><strong>搜索结果数量:</strong> ${items.length}</p>`;
                    
                    if (items.length > 0) {
                        html += '<h5>🔎 搜索结果：</h5>';
                        items.forEach(product => {
                            const nameMatch = product.spec.displayName.toLowerCase().includes('cnc');
                            const descMatch = product.spec.description && product.spec.description.toLowerCase().includes('cnc');
                            
                            html += `
                                <div class="result-item">
                                    <strong>${product.spec.displayName}</strong>
                                    ${nameMatch ? '<span class="badge badge-success">名称匹配</span>' : ''}
                                    ${descMatch ? '<span class="badge badge-success">描述匹配</span>' : ''}
                                    <br><small>描述: ${product.spec.description || '无'}</small>
                                </div>
                            `;
                        });
                    } else {
                        html += '<p><em>没有找到包含"CNC"的产品</em></p>';
                    }
                    
                    html += `
                        <details style="margin-top: 10px;">
                            <summary>查看完整响应</summary>
                            <pre>${JSON.stringify(data, null, 2)}</pre>
                        </details>
                    `;
                } else {
                    const errorText = await response.text();
                    html += `<pre>错误详情: ${errorText}</pre>`;
                }
                
                html += '</div>';
                resultDiv.innerHTML = html;
                
            } catch (error) {
                resultDiv.innerHTML = `
                    <div class="section error">
                        <h4>❌ 测试失败</h4>
                        <pre>${error.message}</pre>
                    </div>
                `;
            }
        }
        
        // 页面加载时自动测试
        window.onload = function() {
            testAllProducts();
        };
    </script>
</body>
</html>